var PROV = []  // 存储修改商品供应商时的信息（每次编辑都会刷新一次）
var EDIT_PROD = []  // 编辑的商品信息
var BASE_64_URL = ''  // 存储商品图片的base64编码，修改商品时会用到
function startLoadSpinner(){
    $('#searchAlertPlaceholder').html(`
        <div class="spinner-border text-center" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>`)
}
function stopLoadSpinner(){
    $('#searchAlertPlaceholder').html(``)
}
// 修改单商品状态 1 上架 0 下架
function takeProduct(prodId, oldStatus){
    let reqData = new Map()
    reqData['prodId'] = prodId
    reqData['type'] = oldStatus === 1 ? 'down' : 'up'
    $.ajax({
        url: '/admin/product/update',
        data: JSON.stringify(reqData),
        type: 'POST',
        dataType: 'JSON',
        contentType: 'application/json;charset=utf-8',
        error: (err) => {
            open_toast('fail', '修改商品失败!')
            console.error(err.responseText)
        },
        success: (data) => {
            open_toast(data['code'] == 1 ? 'success' : 'warning',
                data['message'])
        }
    })
}
// 修改多个商品状态
function takeProducts(status){
    let reqData = new Map()
    let choseProduct = []
    $('.cb_product').each(function(){
        if($(this).prop('checked') === true)
            choseProduct.push ($(this).data('id'))
    })
    reqData['type'] = status == 1 ? 'downs' : 'ups'
    reqData['prodId'] = choseProduct
    $.ajax({
        url: '/admin/product/update',
        data: JSON.stringify(reqData),
        type: 'POST',
        dataType: 'JSON',
        contentType: 'application/json;charset=utf-8',
        error: (err) => {
            open_toast('fail', '修改商品失败!')
            console.error(err.responseText)
        },
        success: (data) => {
            open_toast(data['code'] == 1 ? 'success' : 'warning',
                data['message'])
        }
    })
}
// 编辑商品
function editProductById(prodId){
    //获取当前商品的信息
    $.ajax({
        url:'/admin/product/query/' + prodId,
        type:'POST',
        dataType: 'JSON',
        error: (err) => {
            open_toast('fail', "查询商品信息请求失败!")
            console.error(err.responseText)
        },
        success: (data) => {
            console.log(data)
            if(data['code'] === 1){
                console.log(data)
                renderModal(data['response'])
                renderModalProdtype()
                // 设置当前的商品类型
                $('select[name="prodtype.id"]').value(data['response']['prodtype']['id'])
                // 编辑商品信息持久化
                EDIT_PROD = data['response']
            }
            else open_toast('fail', data['message'])
        }

    })
}
// 更新商品图片
function updateProductImg(){
    if(BASE_64_URL!=null){
        $.ajax({
            url: '/admin/product/update/' + $('#form-id').val(),
            type: 'PUT',
            data: {base64url:BASE_64_URL},
            dataType: 'JSON',
            error: (err) =>{ alert('修改头像请求失败.'); console.error(err.responseText);},
            success: (data) => {
                open_toast(data['code'] === 1 ? 'success' : 'fail', data['message'])}
        })
    }
}
// 去添加商品，提前初始化模态框
function toAddProduct(){
    // 初始化图片
    $('#finalImg').attr('src', '')
    // 清空表单内容
    $('#form-product-modify input').val('')
    $('#form-product-modify textarea').val('')
    // 取消模态框图片的响应事件
    $('#sureCut').removeAttr('onclick')
    $('#sureCut').attr('onclick', `sureTailor('add')`)
    // 设置模态框方法为添加供应商
    $('#btn-modal-ok').attr('onclick', 'addProduct()')
    // 渲染供应商
    renderModalProvider()
    // 渲染商品类型
    renderModalProdtype()

}
// 添加商品
function addProduct(){

    $.ajax({
        url: '/admin/product/add',
        type: 'POST',
        data: $('#form-product-modify').serialize() + '&img=' + $('#finalImg').attr('src'),
        dataType: 'JSON',
        error: (err) =>{
            console.error(err.responseText)
        },
        success: (data) => {
            open_toast(data['code'] === 1 ? 'success' : 'fail', data['message'])
        }
    })
}
// 修改商品图片
//弹出框水平垂直居中
(window.onresize = function () {
    $x = $(".tailoring-content")
    var win_height = $(window).height();
    var win_width = $(window).width();
    if (win_width <= 768){
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight())/2,
            "left": 0
        });
    }else{
        $x.css({
            "top": (win_height - $x.outerHeight())/2,
            "left": (win_width - $x.outerWidth())/2
        });
    }
})();
//弹出图片裁剪框
$("#replaceImg").on("click",function () {
    $("#container-img").toggle();
});

//图像上传
function selectImg(file) {
    if (!file.files || !file.files[0]){
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        var replaceSrc = evt.target.result;
        //更换cropper的图片
        $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
    }
    reader.readAsDataURL(file.files[0]);
}
//cropper图片裁剪
$('#tailoringImg').cropper({
    aspectRatio: 1/1,//默认比例
    preview: '.previewImg',//预览视图
    guides: false,  //裁剪框的虚线(九宫格)
    autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
    dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
    movable: true,  //是否允许移动剪裁框
    resizable: true,  //是否允许改变裁剪框的大小
    zoomable: false,  //是否允许缩放图片大小
    mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
    touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
    rotatable: true,  //是否允许旋转图片
    crop: function(e) {
        // 输出结果数据裁剪图像。
    }
});
//旋转
$(".cropper-rotate-btn").on("click",function () {
    $('#tailoringImg').cropper("rotate", 45);
});
//复位
$(".cropper-reset-btn").on("click",function () {
    $('#tailoringImg').cropper("reset");
});
//换向
var flagX = true;
$(".cropper-scaleX-btn").on("click",function () {
    if(flagX){
        $('#tailoringImg').cropper("scaleX", -1);
        flagX = false;
    }else{
        $('#tailoringImg').cropper("scaleX", 1);
        flagX = true;
    }
    flagX != flagX;
});
//裁剪后的处理: 修改商品图片
function sureTailor(type){
    BASE_64_URL = ''
    if ($("#tailoringImg").attr("src") == null ){
        return false;
    }else{
        let cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
        BASE_64_URL = cas.toDataURL('image/png'); //转换为base64地址形式
        $("#finalImg").prop("src",BASE_64_URL);//显示为图片的形式
        //关闭裁剪框
        closeTailor();
    }
    if(type === 'update') updateProductImg()
}

// 关闭裁剪框
function closeTailor() {
    $(".tailoring-container").toggle();
}
// 更改商品信息
function updateProduct(){
    // 修改商品信息
    let reqData = $('#form-product-modify').serialize()
    //添加描述
    $.ajax({
        url:'/admin/product/update/' + $('#form-id').val(),
        type: 'POST',
        data: reqData,
        async: false,
        dataType: 'JSON',
        error: (err) => {
            open_toast('fail', '修改商品信息失败.')
            console.error(err)
        },
        success: (data) => {
            console.log(data)
            open_toast((data['code'] === 1) ? 'success' : 'fail', data['message'])
        }
    })
}
// 渲染模态框的供应商
function renderModalProvider(){
    let $x = $('#form-provname')
    $.ajax({
        url: '/admin/provider/queryall',
        type: 'POST',
        dataType: 'JSON',
        error: (err) => {
            open_toast('fail', '查询供应商信息失败.')
            console.log(err.responseText)
        },
        success: (data) => {
            console.log(data)
            if(data['code'] === 1){
                $x.html('')
                $.each(data['response'], (key, value) => {
                    // 持久化数据
                    PROV.push({id:value['id'], name:value['name']})
                    // 渲染页面
                    $x.append(`<option value="${value['id']}">${value['name']}</option>`)
                })
                // 指定当前商品的供应商
                $x.val(EDIT_PROD['provider']['id'])
            }
        }
    })
}

// 渲染模态框
function renderModal(product){
    // 清空图片裁剪框的内容
    $('#tailoringImg').html('')
    $('.previewImg').html('')
    // 添加模态框图片的响应事件
    $('#sureCut').attr('onclick', "sureTailor('update')")
    // 设置模态框方法为添加供应商
    $('#btn-modal-ok').attr('onclick', 'updateProduct()')
    $('#finalImg').prop('src', product['img'])
    $('#form-id').val(product['id'])
    $('#form-price').val(product['price'])
    $('#form-stock').val(product['stock'])
    $('#form-provider').val(product['provider']['name'])
    $('#form-name').val(product['name'])
    $('#form-detail').val(product['detail'])
    $('select[name="provider"]').val(product['provider']['id'])
    renderModalProvider()
}
// 渲染商品类型
function renderModalProdtype(){
    $('select[name="prodtype.id"]').html('')
    // 获取所有的商品类型
    $.ajax({
        url: '/admin/prodtype/queryall',
        type: 'POST',
        dataType: 'JSON',
        error: (err) => {
            console.error(err.responseText)
        },
        success: (data) => {
            if (data['code'] === 1) {
                // 渲染所有的商品类型
                $.each(data['response'], (index, v) => {
                    $('select[name="prodtype.id"]').append(`
                        <option value="${v['id']}">${v['name']}</option>
                    `)
                })

            }
        }
    })
}
// 渲染商品列表信息
function renderProductInfo(productInfo){

    $('#tbody-product').html(``)

    $.each(productInfo, (index, prod) =>{
        $('#tbody-product').append(`
          <tr valign="baseline">
                <td><input type="checkbox" class="cb_product" data-id="${prod['id']}"></td>
                <td>${prod['id']}</td>
                <td>${prod['provider']['name']}</td>
                <td>${prod['name']}</td>
                <td>${prod['prodtype']['name']}</td>
                <td class="text-danger">￥${prod['price']}</td>
                <td>${prod['stock']}</td>
                <td class="text-center"><img src="${prod['img']}" alt="加载中..." style="width: 100px; height: 100px;"/></td>
                <td>
                     <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#div-modal" onclick="editProductById('${prod['id']}')">编辑</button>
                     <button class="btn ${prod['status'] == 1 ? 'btn-warning' : 'btn-success'}"
                            onclick="takeProduct('${prod['id']}', ${prod['status']})"
                     >
                     ${prod['status'] == 1 ?'下架':'上架'}</button>
                     <button class="btn btn-danger">删除</button>
                </td>
          </tr>`)
    })
}
// 渲染商品类型的下拉菜单
function renderProductDropdown(prodtype){
    $('#prodtype-dropdown-menu').html(`
               <li><a class="dropdown-item" href="${updateCurrentUrlParam('prodtype', ``)}">所有商品</a></li>
        `)
    $.each(prodtype, (k, v) => {
        $('#prodtype-dropdown-menu').append(`
               <li><a class="dropdown-item" href="${updateCurrentUrlParam('prodtype', `${v['name']}`)}">${v['name']}</a></li>
        `)
    })
}
// 渲染分页信息
function renderProductPageInfo(pageInfo){
    $('#div-admin-product-page').html('')

    // 首先设置每一页的HTML
    let $perPageInfo = $('<li></li>')
    for (let i in `${pageInfo.navigatepageNums}`) {
        if(i === '0') continue
        $perPageInfo.append(`
        <li>
            <a
                href="${updateCurrentUrlParam('pageNow', i)}" 
                class="page-link d-block text-dark ${i == pageInfo.pageNum ? ' bg-primary' : ''}">
                ${i}
            </a>
        </li>
        `)
    }
    // 如果页数大于1在进行渲染
    if(pageInfo.pages > 1){
        $('#div-admin-product-page').html(`
     <!-- 分页部分 -->
    <h1 class="u-text-sm text-center">第${pageInfo.pageNum}页 共${pageInfo.pages}页</h1>
    <nav aria-label="Page navigation" class="u-text-sm">
        <ul class="pagination justify-content-center">
            <!--首页-->
            <li class="page-item">
                <a class="page-link d-block text-dark" href="${updateCurrentUrlParam('pageNow', pageInfo.navigateFirstPage)}">
                    首页
                </a>
            </li>
            <!--上一页-->
            <li class="page-item">
                <a class="page-link d-block text-dark"
                   href="${updateCurrentUrlParam('pageNow', pageInfo.prePage)}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>`
            + $perPageInfo.html() +
            `
            <!--下一页-->
            <li class="page-item">
                <a class="page-link d-block text-dark"
                   href="${updateCurrentUrlParam('pageNow', pageInfo.nextPage)}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <!--最后一页-->
            <li class="page-item">
                <a class="page-link d-block text-dark"
                   href="${updateCurrentUrlParam('pageNow', pageInfo.navigateLastPage)}">
                    末页
                </a>
            </li>
        </ul>
    </nav>`)
    }

    $('#textShowResult').html(`共${pageInfo.total}条结果`)
}
// 获取商品信息
function loadProductData(){
    startLoadSpinner()
    $.ajax({
        url:'/admin/product/query',
        type: 'POST',
        data: getUrlParamToJSON(),
        dataType: 'JSON',
        contentType : 'application/json;charset=utf-8',
        error:(err) => {
            open_toast('fail', '获取商品信息失败!')
            console.error(err.responseText)
        },
        success: (data) =>{
            console.log(data)
            setTimeout(function (){
                renderProductDropdown(data['response']['prodtypes'])
                renderProductInfo(data['response']['pageInfo']['list'])
                renderProductPageInfo(data['response']['pageInfo'])
                stopLoadSpinner()
            }, 200)
        }
    })
}
// 搜索商品
function searchProduct(){
    let prodName = $('#input-search-role').val();
    location.href = updateCurrentUrlParam('prodName', prodName)
}
$(document).keydown(function(event){
    if (event.keyCode === 13) {//回车键搜索
        searchProduct()
    }
});
//全选
$('#cb_all').click(function (){
    $('.cb_product').prop('checked', $(this).prop('checked'))
})
// 成功提示框结束后自动刷新页面
$('#toast-success').bind('hidden.bs.toast', function () {
    $('#btn-modal-cancel').click()
    location.reload()
})
loadProductData()